<template>
    <div class="page-container">
      <div ref="plantRef" class="container-charts">各地区种植面积统计TOP10</div>
    </div>
  </template>
  
  <script>
  //引入封装好的接口
  import { income } from "../request/api";
  export default {
    data() {
      return {
        xData: [],
        seriesData: [],
      };
    },
    computed:{
      getTheme(){
        return this.$store.state.theme
      }
    },
    watch:{
      getTheme(){
        this.info.dispose()
        this.initEcharts()
        this.getData()
        this.screen()
      }
    },
    mounted(){
      this.initEcharts()
      this.getData()
      this.screen()
      window.addEventListener('resize',this.screen)
    },
    destroyed(){
      window.removeEventListener('resize',this.screen)
    },
    methods: {
      initEcharts(){
          let dom=this.$refs.plantRef
          let myChart =this.$echarts.init(dom,this.getTheme)
          this.info=myChart
          let options={
              title: {
            text: "全国种植每月收成情况", //主标题
            textStyle: {
              color: "#333",
              // fontSize: 30,
            },
            left:20,
            top:10
          },
          grid:{
              left:'15%',
              top:'15%',
              right:'6%',
              bottom:'10%'
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: true, //轴刻度
            },
            axisLabel: {
              show: true, //坐标轴刻度标签
            },
            axisLine: {
              show: true,
            },
            axisPointer: {
              //鼠标滑过的指示器
              show: true,
            },
          },
          xAxis: {
            type: "category",
            data: this.xData,
          },
          series: [
            {
              type: "bar", //柱状图
              data: this.seriesData,
              label: {
                //显示当前柱的数值
                show: true,
                position: "top",
                // color:'red',
                // fontSize:40
              },
              itemStyle: {
                // color:'red' 设置每一个柱体的样式
                borderRadius: [50, 50, 0, 0],
                color: {
                  type: "liner", // 线性渐变 渐变的起始位置 x y 起始点 结束点  x2 y2
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "red",
                    },
                    {
                      offset: 1,
                      color: "blue",
                    },
                  ],
                },
              },
            },
          ],
        }
        myChart.setOption(options)
      },
      async getData(){
          let res=await income()
          console.log(res);
        //   res.data.sort((a,b)=>a.area-b.area)
          this.xData=res.data.map((item)=>item.month)
          this.seriesData=res.data.map((item)=>item.harvest)
          this.setData(this.xData,this.seriesData)
      },
      setData(x,s){
          this.info.setOption({
              xAxis:{
                  type:"category",
                  data:x
              },
              series:[
                  {
                      type:'bar',
                      data:s
                  }
              ]
          })
      },
      screen(){
          this.info.resize()
          let width=this.$refs.plantRef.offsetWidth
          let fontNum=width/100*5
          this.info.setOption({
              title:{
                  textStyle:{
                      fontSize:fontNum
                  }
              }
          })
      }
    },
  };
  </script>
  
  <style lang="less" scoped>
  
  </style>